<template>
  <div class="app-container">
    <el-table :data="devices">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form
            v-for="sensor in props.row.sensors"
            :key="sensor.id"
            label-position="left"
            inline
            class="demo-table-expand"
          >
            <el-form-item label="传感器名">
              <span>{{ sensor.name }}</span>
            </el-form-item>
            <el-form-item label="数值">
              <span>{{ sensor.value }}</span>
            </el-form-item>
            <el-form-item label="更新时间">
              <span>{{ sensor.time }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="device id" prop="id"></el-table-column>
      <el-table-column label="name" prop="name"></el-table-column>
      <el-table-column label="register time" prop="regTime"></el-table-column>
      <el-table-column label="type" prop="type"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getGroupLocation } from '@/api/devices.js'

export default {
  name: 'SensorList',

  data() {
    return {
      devices: null
    }
  },

  created() {
    this.fetch()
  },

  methods: {
    fetch() {
      getGroupLocation().then(response => {
        this.devices = response.data.items.devices
      })
    }
  }
}
</script>

<style lang="scss">
.demo-table-expand {
  font-size: 0;

  .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
}
</style>
